<template>
  <div class="app">
    <div class="nav">
      <router-link :to="{path:'/home'}" replace active-class="myLink-class">首页</router-link>
      <router-link :to="{path:'/about'}" replace active-class="myLink-class">关于</router-link>

      <router-link to="/user/123">用户213</router-link>
      <router-link to="/user/321">用户321</router-link>
      <router-link to="/order">订单</router-link>
    </div>
    <button v-on:click="goRanking">跳转到排行榜</button>
    <router-view></router-view>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
const router=useRouter()
const goRanking=()=>{
  router.push({
    path:'/home/ranking',
    query:{
      name:'tom',
      age:31
    }
  })
}
</script>

<style lang="scss" scoped>
.myLink-class{
  color: red;
  text-decoration: none;
}
</style>
